<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom: 20px"
    >
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
      <el-breadcrumb-item>员工信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="查询员工">
        <el-input v-model="formInline.user" placeholder="查询员工"></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="formInline.region" placeholder="全部">
          <el-option label="财务部" value="caiwu"></el-option>
          <el-option label="策划部" value="cehua"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item label="职位">
        <el-select v-model="formInline.region" placeholder="全部">
          <el-option label="财务部" value="caiwu"></el-option>
          <el-option label="策划部" value="cehua"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="ID" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>邮箱: {{ scope.row.email }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <!-- <el-table-column label="生日" prop="birth"></el-table-column> -->
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="部门" prop="department"></el-table-column>
      <el-table-column label="职位" prop="position"></el-table-column>
      <el-table-column label="入职时间" prop="time"></el-table-column>
      <el-table-column label="出勤率" prop="attendance"></el-table-column>
      <el-table-column label="薪资" prop="salary"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            style="margin-left: 0; margin-top: 5px"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button type="success" round style="margin-top: 10px"
      ><a href="#/add">添加</a></el-button
    >
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      tableData: [
        {
          id: 1,
          name: "王小虎",
          sex: "男",
          department: "财务部",
          position: "经理",
          time: "10",
          attendance: "优秀",
          salary: "10000",
        },
        {
          id: 1,
          name: "王小虎",
          sex: "男",
          department: "财务部",
          position: "经理",
          time: "10",
          attendance: "优秀",
          salary: "10000",
        },
        {
          id: 1,
          name: "王小虎",
          sex: "男",
          department: "财务部",
          position: "经理",
          time: "10",
          attendance: "优秀",
          salary: "10000",
        },
        {
          id: 1,
          name: "王小虎",
          sex: "男",
          department: "财务部",
          position: "经理",
          time: "10",
          attendance: "优秀",
          salary: "10000",
        },
      ], //对应数据库的字段
      form: {
        birth: "",
        sex: "男",
        name: "",
        email: "",
      },
    };
  }, //方法
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    // handleEdit(index, row) {
    //   // eslint-disable-line no-unused-vars
    //   // form = this.form;
    // }, //删除按钮绑定的方法 然后用判断下标id来从后端的方法删除此数据
    // handleDelete(index, row) {
    //   // eslint-disable-line no-unused-vars

    //   this.$http
    //     .get("http://localhost:8081/delect?id=" + row.id)
    //     .then((res) => {
    //       //res.data.status是后端自定义的标记类 如果为ture则打印成功
    //       if (res.data.status) {
    //         console.log(res.msg);
    //       } else {
    //         console.log(res.msg);
    //       }
    //     });
    // },
  }, //展示数据 从后端获取数据 然后赋值给data来展示
  created() {
    this.$http.get("http://localhost:8081/user").then((res) => {
      this.tableData = res.data;
    });
  },
};
</script>
<style scoped>
</style>
